<template>
  <el-form ref="ruleFormRef" label-position="left" :model="ChangePasswordFrom" status-icon :rules="rules"
    label-width="70px" class="ChangePasswordFrom">

    <el-form-item prop="password">
      <el-input v-model="ChangePasswordFrom.password" type="password" placeholder="请输入密码" autocomplete="off"
        :prefix-icon="Lock" />
    </el-form-item>

    <el-form-item prop="checkPassword">
      <el-input v-model="ChangePasswordFrom.checkPassword" type="password" placeholder="请确认密码" autocomplete="off"
        :prefix-icon="Lock" />
    </el-form-item>

    <el-form-item>
      <div class="submitBtn">
        <el-button @click="submitForm(ruleFormRef)">确认</el-button>
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, reactive, inject } from 'vue'
import { Lock } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
// 验证
import { validatePass } from '@/hooks/login/validate'

import { ElMessage } from 'element-plus'
// 导入函数

import { changePassword } from '@/utils/http/login'

const ruleFormRef = ref<FormInstance>()

const ChangePasswordFrom = reactive({
  password: '',
  checkPassword: '',
})
// 二次修改密码
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请确认密码'))
  } else if (value !== ChangePasswordFrom.password) {
    callback(new Error('两次密码不一致!'))
  } else {
    callback()
  }
}
const rules = reactive({
  password: [{ validator: validatePass, trigger: 'blur' }],
  checkPassword: [{ validator: validatePass2, trigger: 'blur' }],
})

// 清空表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
// 提交
const store: any = inject('store')
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      changePassword(store.state.userBase.email, ChangePasswordFrom.password)
      formEl.resetFields()
      ElMessage.success('修改成功')
    } else {
      return false
    }
  })
}
</script>
<style lang="scss" scoped>
.ChangePasswordFrom {
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
}
</style>

